<%@ page contentType="text/html; charset=iso-8859-1" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page import="com.iMusic.businessLogicLayer.Account" %>
<%@ page import="com.iMusic.businessLogicLayer.Product" %>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>iMusic</title>

<script>

function validateForm()
{
var x=document.forms["Checkout"]["cardNumber"].value;
if (x==null || x=="")
  {
  alert("Card Number must be filled out.");
  return false;
  }
var numberPattern = new RegExp("^[0-9]+$");
if (!numberPattern.test(x))
{
alert("Only numbers are accepted for the Card Number.");
return false;
}
if (x.length < 10)
  {
	alert("Card Number must have at least 10 numbers.");
	return false;
  }
  
var x=document.forms["Checkout"]["expiryDate"].value;
if (x==null || x=="")
  {
  alert("Expiry Date must be filled out.");
  return false;
  }
var regex = new RegExp("^(?:(?:([0-9]{4}(-|\/)(?:(?:0?[1,3-9]|1[0-2])(-|\/)(?:29|30)|((?:0?[13578]|1[02])(-|\/)31)))|([0-9]{4}(-|\/)(?:0?[1-9]|1[0-2])(-|\/)(?:0?[1-9]|1\\d|2[0-8]))|(((?:(\\d\\d(?:0[48]|[2468][048]|[13579][26]))|(?:0[48]00|[2468][048]00|[13579][26]00))(-|\/)0?2(-|\/)29))))$");
if (!regex.test(x))
{
	alert("Please check Expiry Date Format.");
	return false;
}
  
var x=document.forms["Checkout"]["validationNumber"].value;
if (x==null || x=="")
  {
  alert("Validation Number must be filled out.");
  return false;
  }
var validationNumberPattern = new RegExp("^[0-9][0-9][0-9]$");
if (!validationNumberPattern.test(x))
{
	alert("Validation Number must be 3 number.");
	return false;
}
if (x.length != 3)
  {
	alert("Validation Number must be 3 number.!!");
	return false;
  }
  
var x=document.forms["Checkout"]["nameOnCard"].value;
if (x==null || x=="")
  {
  alert("Name On Card must be filled out.");
  return false;
  }
var characterPattern = new RegExp("^[A-Za-z ]+$");
if (!characterPattern.test(x))
{
alert("Only english letters are accepted for the Name.");
return false;
}
  
}
function validateAddToCart()
{
	var account = request.getSession().getAttribute("Account");
	if (account==null)
  	{
  		alert("Please login before you add product to your cart.");
  		return false;
  	}
}

function validateCheckout()
{
	alert("...");
	var x=document.forms["Login"]["username"].value;
	if (x==null || x=="")
	  {
	  alert("Username must be filled out.");
	  return false;
	  }
}


function displayFields() {

	var creditFields = document.getElementById("creditFields");
	var debitFields = document.getElementById("debitFields");
	var creditDebit = document.getElementById("creditDebit");
	if (creditDebit.options[creditDebit.selectedIndex].value == 0) {
		creditFields.style.display = 'block';
		debitFields.style.display = 'none';
	} 	
	if (creditDebit.selectedIndex == 1) {
		creditFields.style.display = 'none';
		debitFields.style.display = 'block';

		creditFields.style.visibility = 'visible';
		debitFields.style.visibility = 'hidden';
	} 
	alert("...");

}

</script>

</head>
<body>
<%
String error=request.getParameter("error");
if(error==null || error=="null"){
 error="";
}

String error2 = (String) request.getSession().getAttribute("Error");
if(error2==null || error2=="null"){
	 error2="";
	}


%>
<%
if (!error2.equals("")) {
%>
	<div style="text-align: right; color: rgb(255, 0, 0);"><%=error2%></div>
<%
}
%>	

<c:if test="${!Order.isPaid() }">

	<i>Review your order and make the payment</i>
	<br>
	<br>
	<table style="text-align: left; width: 100%; height: 100%;" border="0"
	cellpadding="2" cellspacing="2">
	<tbody>
	
		<tr>
			<td style="vertical-align: top; width: 300px;"><br>
				<b>PRODUCT</b>
			</td>
			<td style="vertical-align: top; width: 100px;"><br>
				<b>PRICE<br> PER UNIT</b>
			</td>
			<td style="vertical-align: top; width: 100px;"><br>
				<b>QUANTITY</b>
			</td>
			<td style="vertical-align: top; width: 100px;"><br>
				<b>AMOUNT</b>
			</td>
		</tr>
	
		<c:forEach items="${Cart.getProducts()}" var="prod">
			<tr>
				<td style="vertical-align: top; width: 300px;"><br>
		            <b> ${prod.getName()}</b>&nbsp(${prod.getTypeName()})&nbsp<br>
		            <i>${prod.getCategoryName()}</i><br>
		        </td>
				<td style="vertical-align: top; width: 100px;"><br>
		        	<fmt:formatNumber value="${prod.getPrice()}" type="currency"/> 
		        </td>
				<td style="vertical-align: top; width: 100px;"><br>
		        	${Cart.getQuantity(prod)} 
		        </td>
				<td style="vertical-align: top; width: 100px;"><br>
		        	<fmt:formatNumber value="${Cart.calculateSubtotal(prod) }" type="currency"/> 
		        </td>
		    </tr>    
		</c:forEach>
		
			<tr>
			<td style="vertical-align: top; width: 300px;"><br>
			</td>
			<td style="vertical-align: top; width: 100px;"><br>
			</td>
			<td style="vertical-align: top; text-align: right; width: 100px;"><br>
				Subtotal: <br>
				Federal Tax: <br>
				Provincial Tax: <br>
				Shipping: <br>
				<b>Total:</b> <br>
			</td>
			<td style="vertical-align: top; width: 100px;"><br>
				<fmt:formatNumber value="${Cart.calculateSubtotal()}" type="currency"/><br>
				<fmt:formatNumber value="${Cart.calculateFederalTax() }" type="currency"/><br>
				<fmt:formatNumber value="${Cart.calculateProvincialTax() }" type="currency"/><br>
				<fmt:formatNumber value="${Cart.getShippingRate() }" type="currency"/><br>
				<b><fmt:formatNumber value="${Cart.getTotal() }" type="currency"/></b><br> 
			</td>
		<tr>
		
	</tbody>
	</table>
	
	<b>Payment:</b>
	<table style="text-align: left; width: 100%; height: 100%;" border="0"
	cellpadding="2" cellspacing="2">
	<tbody>
	
	<form style="vertical-align: middle; text-align: center; " target="_top" name="Checkout" action="Checkout" method="post" onsubmit="return validateForm()">
	
	    <tr>
	      <td style="vertical-align: top; width: 250px;"><big><small>Purchase Amount: 
	      <br>
	      </small></big></td>
	      <td style="vertical-align: top; width: 192px;"><fmt:formatNumber value="${Cart.getTotal()}" type="currency"/></td>
	    </tr>
	    <tr>
	      <td style="vertical-align: top; width: 250px;"><big><small>Payment Method:
	      <br>
	      </small></big></td>
	      <td style="vertical-align: top; width: 192px;">
	 		<select size=1 name="creditDebit" id="creditDebit" onChange="displayFields();">
			<option value=0 selected>Credit Card</option>
			<!--<option value=1 disabled>Debit Card</option>-->
			</select>
	      </td>
	    </tr>
	    
		<div id="creditFields" style="display: none; Visibility: hidden">
	    
		    <tr>
		      <td style="vertical-align: top; width: 250px;"><big><small>Payment Method:
		      <br>
		      </small></big></td>
		      <td style="vertical-align: top; width: 192px;">
		 		<select size=1 name="cardFlag" id="cardFlag" >
				<option value="Master Card" >MasterCard</option>
				<option value="Visa" >Visa</option>
				<option value="American Express" >American Express</option>
				</select>
		      </td>
		    </tr>
		    <tr>
		      <td style="vertical-align: top; width: 250px;"><big><small>Card number:
		      <br>
		      </small></big></td>
		      <td style="vertical-align: top; width: 192px;"><input name="cardNumber"></td>
		    </tr>
		    <tr>
		      <td style="vertical-align: top; width: 250px;"><big><small>Expiry Date (YYYY-MM-DD):
		      <br>
		      </small></big></td>
		      <td style="vertical-align: top; width: 192px;"><input type="date" name="expiryDate"></td>
		    </tr>
		    <tr>
		      <td style="vertical-align: top; width: 250px;"><big><small>Card validation number (3 number on the back of your card):
		      <br>
		      </small></big></td>
		      <td style="vertical-align: top; width: 192px;"><input name="validationNumber"></td>
		    </tr>
		    <tr>
		      <td style="vertical-align: top; width: 250px;"><big><small>Name on Card:
		      <br>
		      </small></big></td>
		      <td style="vertical-align: top; width: 192px;"><input name="nameOnCard"></td>
		    </tr>
		</div>
		
		<tr>
	      <td style="vertical-align: top; text-align: center; width: 250px;">
				<input value="Submit Payment" type="submit">
	      <td style="vertical-align: top; width: 192px;"></td>
		  </tr>
		</tr>
	
	</form>
	</tbody>
	</table>
</c:if>

<c:if test="${Order.isPaid() }">

	<b>PURCHASE SUCCESSFULLY PROCESSED.</b>
	<br>
	<table style="text-align: left; width: 100%; height: 100%;" border="0"
	cellpadding="2" cellspacing="2">
	<tbody>
	
		<tr>
			<td style="vertical-align: top; width: 200px;"><br>
				<b>Receipt Number: </b>
			</td>
			<td style="vertical-align: top; width: 200px;"><br>
				${Order.getReceiptNumber() }
			</td>
		</tr>
		<tr>
			<td style="vertical-align: top; width: 200px;"><br>
				<b>Order Id: </b>
			</td>
			<td style="vertical-align: top; width: 200px;"><br>
				${Order.getOrderId() }
			</td>
		</tr>
		<tr>
			<td style="vertical-align: top; width: 200px;"><br>
				<b>Amount: </b>
			</td>
			<td style="vertical-align: top; width: 200px;"><br>
				<fmt:formatNumber value="${Order.getTotal() }" type="currency"/>
			</td>
		</tr>
		<tr>
			<td style="vertical-align: top; width: 200px;"><br>
				<b>Name: </b>
			</td>
			<td style="vertical-align: top; width: 200px;"><br>
				${Account.getName() }
			</td>
		</tr>
	</tbody>
	</table>
	
	<br>
	<i>Print this page for your records.</i>
	<br>
	
	<%
		request.getSession().removeAttribute("Cart");
		request.getSession().removeAttribute("Order");
	%>
	${Account.setCart(null) }
	
</c:if>

<c:if test="${ProdList != null && ProdList.size() > 0}">

<br>
<b>DOWNLOAD YOUR PURCHASED PRODUCT(S):</b>
<br>

<table style="text-align: left; width: 100%; height: 100%;" border="0"
cellpadding="2" cellspacing="2">
<tbody>

<c:forEach items="${ProdList}" var="prod">
		<tr>
			<td style="vertical-align: top; width: 100px;"><br>
	            ${prod.getName()}<br>
	            <i>${prod.getTypeName() }</i>
	        </td>
			<td style="vertical-align: top; width: 100px;"><br>
	        	<a href="downloadables/song.mp3">Download</a> 
	        </td>
			<td style="vertical-align: top; width: 100px;"><br>
	        </td>
			<td style="vertical-align: top; width: 100px;"><br>
	        </td>
	    </tr>    
	</c:forEach>
</tbody>
</table>
<br>
<br>

<%
		request.getSession().removeAttribute("ProdList");
%>
</c:if>

<br>

</body>
</html>